<template>
	<div>
		<div class="app-container">

			<div class="return-button">
				<a @click="goBack">&#8592; 返回</a>
			</div>

			<div class="dialogDiv1" ref="leftDiv">
				<div style="text-align: center; margin-bottom: 40px">
					<h1>{{ entry.companyChineseName }}</h1>
				</div>
				<!-- <el-form ref="form" :model="form"  :rules="DataFillingRules" label-width="140px"> -->
				<el-form ref="form" :model="form"  label-width="140px">

					<div class="centered-form">
						<el-form-item label="建档期就业人数" >
							<div style="display: flex; align-items: center;">

								<span class="demonstration"></span>
								<el-input class="long_input" v-model="form.p_number1" placeholder="" :disabled=true />
							</div>
						</el-form-item>
					</div>


					<div class="centered-form">
						<el-form-item label="调查期就业人数"  >
							<div style="display: flex; align-items: center;">

								<span class="demonstration"></span>
								<el-input class="long_input" v-model="form.p_number2" :disabled=true />

							</div>
						</el-form-item>
					</div>


					<div class="centered-form">
						<el-form-item label="就业人数减少类型" v-if="showReasonFields1" >
							<div style="display: flex; align-items: center;">

								<span class="demonstration"></span>
								<el-input
									class="long_input"
									v-model="form.reduction_type"
									:options="form.reduction_type_options"
									:disabled=true>
								</el-input>

							</div>
						</el-form-item>
					</div>



					<div class="centered-form">
						<el-form-item label="主要原因" v-if="showReasonFields1" >
							<div style="display: flex; align-items: center;">

								<span class="demonstration"></span>
								<el-input
									class="long_input"
									v-model="form.main_reason"
									:options="form.main_reason_options"
									:disabled=true>
								</el-input>

							</div>
						</el-form-item>
					</div>


					<div class="centered-form">
						<el-form-item label="次要原因" v-if="showReasonFields2" >
							<div style="display: flex; align-items: center;">

								<span class="demonstration"></span>
								<el-input
									class="long_input"
									v-model="form.second_reason"
									:options="form.second_reason_options[form.main_reason]"
									:disabled=true >
								</el-input>

							</div>
						</el-form-item>
					</div>


					<div class="centered-form">
						<el-form-item label="第三原因" v-if="showReasonFields2" >
							<div style="display: flex; align-items: center;">

								<span class="demonstration"></span>
								<el-input class="long_input" v-model="form.third_reason" :disabled=true />
								<!-- <el-input
									class="long_input"
									type="textarea"
									:rows="3"
									placeholder="请输入内容"
									v-model="form.third_reason">
								</el-input> -->
								<span style="color: red; font-size: 1.7em; margin-left: 0.55em;"></span>

							</div>
						</el-form-item>
					</div>


					<div class="centered-form">
						<el-form-item label="原因说明" v-if="showReasonFields1" >
							<div style="display: flex; align-items: center;">

								<span class="demonstration"></span>
								<!-- <el-input class="long_input" v-model="form.reason_describe" placeholder="请输入"  /> -->
								<el-input
									class="long_input"
									type="textarea"
									:rows="4"
									v-model="form.reason_describe"
									:disabled=true
									textareaCalcStyle="long_input">
								</el-input>

							</div>
						</el-form-item>
					</div>


				</el-form>
			</div>
			<div class="dialogDiv2" v-bind:style="{height: leftDivHeight}">
                <el-timeline>
                    <el-timeline-item
                        v-for="(activity, index) in activities"
                        :key="index"
                        :icon="activity.icon"
                        :type="activity.type"
                        :color="activity.color"
                        size="large"
                    >
                        <p class="timeline-name">{{ activity.name }}</p>
                        <p class="timeline-content" v-if="activity.idea != ''">
                        <span>退回备注: </span><span class="timeline-content__idea">{{ activity.idea }}</span>
                        </p>
                        <p class="timeline-content">{{ activity.timestamp }}</p>
                    </el-timeline-item>
                </el-timeline>
            </div>
		</div>

	</div>
</template>

<script>
// import { getFormInfo} from '@/api/enterprise/dataFilling'
import {getQueryFormInfo} from '@/api/enterprise/dataQuery'
import { getDataReportFormHistory } from '@/api/common/queryHistory'

export default {
	data() {
		return {
			activities: [],
            leftDivHeight: '0px',
			formID: 0,
			showReasonFields1: false, // 是否显示填写主要原因的框
			showReasonFields2: false,
			isNumber1Get: false, // 是否建档期就业人数从数据库中获取到了
			labelPosition: 'right',
			companyCName: '',
			form: {
				p_number1: null,
				p_number2: null,

				reduction_type: [],
				reduction_type_options: [
					{
						value: '关闭破产',
						label: '关闭破产',
					},
					{
						value: '停业整顿',
						label: '停业整顿',
					},
					{
						value: '经济性裁员',
						label: '经济性裁员',
					},
					{
						value: '业务转移',
						label: '业务转移',
					},
					{
						value: '自然减员',
						label: '自然减员',
					},
					{
						value: '正常解除或终止劳动合同',
						label: '正常解除或终止劳动合同',
					},
					{
						value: '国际因素变化影响',
						label: '国际因素变化影响',
					},
					{
						value: '自然灾害',
						label: '自然灾害',
					},
					{
						value: '重大事件影响',
						label: '重大事件影响',
					},
					{
						value: '其他',
						label: '其他',
					},
				],


				main_reason: [],
				main_reason_options: [
					{
						value: '产业结构调整',
						label: '产业结构调整',
					},
					{
						value: '重大技术改革',
						label: '重大技术改革',
					},
					{
						value: '节能减排、淘汰落后产能',
						label: '节能减排、淘汰落后产能',
					},
					{
						value: '订单不足',
						label: '订单不足',
					},
					{
						value: '原材料涨价',
						label: '原材料涨价',
					},
					{
						value: '工资、社保',
						label: '工资、社保',
					},
					{
						value: '自然减员',
						label: '自然减员',
					},
					{
						value: '其他',
						label: '其他',
					},

					{
						value: '经营资金困难',
						label: '经营资金困难',
					},
					{
						value: '税收政策变化（包括税负增加或出口退税减少等）',
						label: '税收政策变化（包括税负增加或出口退税减少等）',
					},
					{
						value: '季节性用工',
						label: '季节性用工',
					},
					{
						value: '国际因素变化',
						label: '国际因素变化',
					},
					{
						value: '招不上人来',
						label: '招不上人来',
					},
					{
						value: '正常解除或终止劳动合同',
						label: '正常解除或终止劳动合同',
					},
				],


				second_reason: [],
				second_reason_options:{
					'自然减员':[
						{
							value: '退休',
							label: '退休',
						},
						{
							value: '死亡',
							label: '死亡',
						},
						{
							value: '退职',
							label: '退职',
						},
					],

					'其他':[
						{
							value: '自行离职',
							label: '自行离职',
						},
						{
							value: '工作调动',
							label: '工作调动',
						},
						{
							value: '劳动关系转移',
							label: '劳动关系转移',
						},
						{
							value: '招不上人来',
							label: '招不上人来',
						},
					],
				},

				third_reason: null,
				reason_describe: null,
			},



		}	//return
	},


	created() {
		this.getData();
	},

	props: {
		entry: Object
	},

	methods: {

		goBack() {
			const newValues = {
				sList: true,
				sForm: false,
			};
			this.$emit('update-parameter', newValues); // 触发自定义事件
		},


		getData() {
			// 读入表单填写过的内容以及上一次调查期的人数
			// console.log("entry")
			// console.log(this.entry)
			this.formID = this.entry.formId
			this.form.p_number1 = this.entry.formStartTotalNum;
			this.form.p_number2 = this.entry.formEndTotalNum;
			if(!this.entry.formDecreaseType) this.form.reduction_type = null;
			else this.form.reduction_type = (this.entry.formDecreaseType).split('/');
			if(!this.entry.formFirstReason) this.form.main_reason = null;
			else this.form.main_reason = (this.entry.formFirstReason).split('/');
			if(!this.entry.formSecondReason) this.form.second_reason = null;
			else this.form.second_reason = (this.entry.formSecondReason).split('/');
			this.form.third_reason = this.entry.formThirdReason;
			this.form.reason_describe = this.entry.formReasonDescription;
			this.companyCName = this.entry.companyChineseName;

			const pNumber1 = this.form.p_number1; // 建档期就业人数
			const pNumber2 = this.form.p_number2; // 调查期就业人数
			if (pNumber2 < pNumber1) {
				// 调查期就业人数少于建档期就业人数
				this.showReasonFields1 = true; // 设置显示主要原因框

				if ((this.form.main_reason == "自然减员") || (this.form.main_reason == "其他")) {
					// console.log('主要原因已更改为:', this.form.main_reason);
					this.showReasonFields2 = true; // 显示次要原因字段
				} else if((this.form.main_reason).length > 0){
					this.showReasonFields2 = false; // 隐藏次要原因字段
				}

			} else {
				// 调查期就业人数大于或等于建档期就业人数
				this.showReasonFields1 = false; // 设置隐藏主要原因框
				this.showReasonFields2 = false; // 设置隐藏主要原因框
			}

			this.activities = []
			getDataReportFormHistory({formId: this.formID}).then(response => {
				// console.log("history")
				// console.log(response)
				// console.log(this.$refs.leftDiv.clientHeight)
				// this.$refs.rightDiv.clientHeight = this.$refs.leftDiv.clientHeight
				this.leftDivHeight = document.body.clientHeight * 0.7 + 'px'
				// console.log(this.leftDivHeight)
				var histories = response.data
				var len = response.data.length
				if (len == 0) {
					this.activities.push({
						name: "待填写",
						idea: "",
						color: "#4E97FF",
					})
				}
				for (var i = 0; i < len; ++i) {
					var historyType = histories[i].historyType
					this.activities.push({
						name: this.getHistoryName(historyType),
						idea: histories[i].historyComment,
						color: this.getHistoryColor(historyType),
						timestamp: histories[i].historyDate,
					})
				}
			})

		},

		getHistoryName(historyType) {
            if (historyType == 0) {
                return "企业提交数据报表"
            } else if (historyType == 1) {
                return "市审核退回"
            } else if (historyType == 2) {
                return "市审核通过"
            } else if (historyType == 3) {
                return "省审核退回"
            } else if (historyType == 4) {
                return "省审核通过"
            }
        },

        getHistoryColor(historyType) {
            if (historyType == 0) {
                return "#4E97FF"
            } else if (historyType == 1 || historyType == 3) {
                return "#dd0000"
            } else if (historyType == 2 || historyType == 4) {
                return "#00dd00"
            }
        },


		mySubmit() {
			this.$refs.form.validate(valid => {
				if (valid) {
					alert(this.form.z_name)
					// console.log(this.form.z_name)
					this.$message('已提交!')
				} else {
					// console.log('error submit!!')
					return false
				}
			})
		},

		onCancel() {
			this.$message({
				message: 'cancel!',
				type: 'warning'
			})
		}
	}
}
</script>

<style scoped>
.line {
	text-align: center;
}

.short_input {
	width: 510px; /* 自定义宽度 */
}


.long_input {
	width: 900px; /* 自定义宽度 */
}

.centered-form {
	display: flex;
	justify-content: center;
	align-items: center;
	/* height: 100vh;*/
}

.centered-form2 {
	display: flex;
	justify-content: center;
	align-items: center;
	/* height: 100vh; */
}

.custom-button {
	width: 150px; /* Custom width for the buttons */
}

.return-button {
	position: absolute;
	top: 10px;
	left: 10px;
}

.return-button a {
	text-decoration: none;
	background-color: #0074d9;
	color: #fff;
	padding: 5px 10px;
	border-radius: 5px;
	font-weight: bold;
	text-align: center;
}

.return-button a:hover {
	background-color: #0056b3;
}

.el-input.is-disabled /deep/ .el-input__inner {
	color: #606266 !important;
}

.el-textarea.is-disabled /deep/ .el-textarea__inner {
	color: #606266 !important;
}

.dialogDiv1{
    width:85%;
    /* background:blue; */
    float:left;
}

.dialogDiv2{
    width:15%;
	border-left: 1px solid black;
    margin-left: 0;
    padding: 0;
    /* background:magenta; */
    float:right;
    display: block;
    overflow-y: scroll;
}
.dialogDiv2::-webkit-scrollbar {display:none}

</style>

